<template>
  <!--
   查：
   1：定义查询api
   2:导入api
   3:进入页面就调用api
   4:存储数据并渲染
   5：与分页建立关联
      a:将接口请求的total应用到分页器
      b:将请求用的页码与页容量应用到分页器
      c:页码与页容量改变都要重新请求接口

  增：
    1：创建一个新增弹框组件
    2：导入注册使用
    3：点击新增打开弹窗
    4：完成弹窗布局
    5：完成表单验证（包含数据）
    6：定义与导入调用新增api
    7:新增完成
       a:关闭弹框
       b:清空表单数据与验证
       c:提示
       d:刷新父级列表数据

  删：
    1：点击删除弹出确认框
    2：定义导入与调用删除api
    3:调用成功
       a:提示
       b:刷新列表（考虑当前页无数据情况，如果当前页无数据，页码--）

  改：
    1：点击修改打开新增弹框
    2：回显数据
         a:如果当前行数据包含回显数据（深拷贝）
         b:如果当前行数据不包含回显数据（调用接口）
    3:新增组件内定义一个mode用于区分场景
    4：新增与编辑点击时都要修改该变量为相应值
    5:修改标题
    6:如果表单验证要调整就调整一下
    7：定义导入与调用编辑api(分场景调用)
    8：调用成功
       a:关闭弹框
       b:清空表单数据与验证
       c:提示
       d:刷新父级列表数据

    持久化：
       页容量
          存：页容量修改了就存储到浏览器
          取:初始值取浏览器存储

   分配权限（没有新增的修改）
   1：创建弹框组件
   2：导入注册使用
   3：点击分配权限按钮打开弹窗
   4：完成布局（获取权限数据转换为树形再渲染出来）
   5：完成回显
      a:点击项中包含当前数据就深拷贝
      b:点击项中不包含当前数据就调用接口获取
   6：点击确定要调用分配权限接口（定义导入与调用）
   7：调用成功
      a:提示
      b:关闭弹窗
      c:清空表单数据
      d：如果父级列表使用了相应数据就要刷新，没用就不理

 -->

  <div class="setting">
    <el-card>
      <el-tabs>
        <el-tab-pane label="角色管理">
          <el-button
            class="btn"
            type="primary"
            @click="addEvent"
          >新增角色</el-button>
          <el-table :data="list" border>
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="80px"
            >
              <template v-slot="{ $index }">
                <div>
                  {{ (page.page - 1) * page.pagesize + $index + 1 }}
                </div>
              </template>
            </el-table-column>

            <el-table-column label="名称" align="center" prop="name" />
            <el-table-column label="描述" align="center" prop="description" />
            <el-table-column label="操作" align="center">
              <template v-slot="{ row }">
                <el-button
                  type="success"
                  @click="permissionEvent(row)"
                >分配权限</el-button>
                <el-button
                  type="primary"
                  @click="editEvent(row)"
                >编辑</el-button>
                <el-button type="danger" @click="delEvent(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="page">
            <!--
            el-pagination
               layout:布局
                   total：总数, sizes:页容量选项, prev：上一页, pager:页码, next：下一页, jumper：跳转至哪一页
               total:总数
               page-size:页容量的值(需要在页容量选项中存在)
               page-sizes：页容量选项
               current-page:页码
               @size-change：页容量改变
               @current-change:页码改变
         -->

            <el-pagination
              :current-page.sync="page.page"
              :page-sizes="[1, 2, 5, 10, 20, 50, 100, 300, 400]"
              :page-size.sync="page.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="sizeChange"
              @current-change="getData"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="公司信息" lazy>
          <Info />
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 弹窗组件 -->
    <Add ref="add" @getData="getData" />
    <!-- 分配权限弹窗 -->
    <SetPermission ref="set" />
  </div>
</template>
<script>
import { sysRole, sysRoleDelete } from '@/api/setting'
import Add from './components/add.vue'
// import Info from './components/info.vue'
import SetPermission from './components/setPermission.vue'
export default {
  // 异步组件（路由懒加载）
  components: {
    Add,
    Info: () => import('./components/info.vue'),
    SetPermission
  },
  data() {
    return {
      list: [],
      page: {
        page: 1,
        pagesize: +localStorage.getItem('setting_size') || 1
      },
      total: 400
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await sysRole(this.page)
      this.list = res.data.rows
      this.total = res.data.total
      console.log(res)
    },
    // 新增点击事件
    addEvent() {
      // 打开弹框
      this.$refs.add.show = true
      this.$refs.add.mode = 'add'
    },
    // 删除点击事件
    async delEvent(row) {
      await this.$confirm(`您确定删除${row.name}该项吗？`, '温馨提示')
      await sysRoleDelete(row.id)
      this.$message.success('删除成功')
      // 确认当前页是否只有一条数据且页码>1，如果只有一条，页码--,
      if (this.list.length === 1 && this.page.page > 1) {
        this.page.page--
      }
      this.getData()
    },
    // 修改点击事件
    editEvent(row) {
      // 打开弹框
      this.$refs.add.show = true
      // 回显数据
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      this.$refs.add.mode = 'edit'
      console.log(row)
    },
    // 页容量改变
    sizeChange() {
      // 存：
      localStorage.setItem('setting_size', this.page.pagesize)
      this.getData()
    },
    // 分配权限点击
    permissionEvent(row) {
      this.$refs.set.show = true
      // 调用弹窗内方法获取权限列表数据
      this.$refs.set.getData()
      this.$refs.set.getRoleInfo(row.id)
      // console.log(row)
    }
  }
}
</script>
<style lang="scss" scoped>
.setting {
  padding: 20px;
  .btn {
    margin-bottom: 15px;
  }
  .page {
    padding-top: 20px;
    text-align: center;
  }
}
</style>
